// 已有账号跳转登录页面
let F = document.querySelector(".F");
let login = document.querySelector(".login");
login.onclick = function (e) {
  e.returnValue = false;
  location.href = "../html/login.html";
};

// 随机获取四位数的验证码
let auth = document.querySelector("#auth");
let changeyzm = document.querySelector(".changeyzm");
let change = document.querySelector(".change");

changeyzm.onclick = function (e) {
  e.returnValue = false;
};
var n = "";
for (var i = 0; i < 4; i++) {
  n += parseInt(Math.random() * 10);
}
changeyzm.innerHTML = n;

change.onclick = function () {
  n = "";
  for (var i = 0; i < 4; i++) {
    n += parseInt(Math.random() * 10);
  }
  changeyzm.innerHTML = n;
};

// yanzhen
let form = document.querySelector("form");

let tel = document.querySelector("#tel");
let telErr = document.querySelector(".telErr");

let pass = document.querySelector("#pass");
let passErr = document.querySelector(".passErr");

let authErr = document.querySelector(".authErr");

let telauth = document.querySelector("#telauth");
let telauthErr = document.querySelector(".telauthErr");
let telauthbtn = document.querySelector(".telauthbtn");

let btn = document.querySelector("#btn");

let check = document.querySelector("#check");
let checkErr = document.querySelector(".checkErr");

let B = document.querySelector(".B");

console.log(pass);

var flag = {
  telFlag: false,
  passFlag: false,
  authFlag: false,
  telauthFlag: false,
  checkFlag: false,
};

form.onsubmit = function (e) {
  e.returnValue = false;
  // 多选框
  if (!check.checked) {
    checkErr.style.display = "inline";
    checkErr.style.color = "red";
    checkErr.innerHTML = "请阅读并同意“用户协议”和“用户隐私政策”";
  } else if (check.checked) {
    checkErr.style.display = "none";
  }
  console.log(tel.value);
  console.log(pass.value);

  //ajax
  let xhr = new XMLHttpRequest();
  xhr.open("post", "http://localhost:9090/register");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(`tel=${tel.value}&password=${pass.value}`);
  xhr.onload = function () {
    // console.log(xhr.responseText);
    let data = JSON.parse(xhr.responseText);
    if (!data.code) {
      alert(data.msg);
      return;
    }
    let flag = confirm(data.msg + "是否跳转到登录页面");
    if (!flag) {
      return;
    }
    location.href = "../html/login.html";
  };
};

// 手机号：/^1[3-9]\d{9}$/
tel.oninput = function () {
  var telReg = /^1[3-9]\d{9}$/;
  var res = telReg.test(tel.value);
  if (!res) {
    telErr.style.display = "inline";
    telErr.style.color = "red";
    telErr.innerHTML = "请输入正确的手机号码";
    flag.telFlag = false;
    fun();
    return;
  }
  flag.telFlag = true;
  telErr.style.display = "none";
  fun();
};

//密码 /^[\dA-Za-z]{8,20}$/
pass.oninput = function () {
  var passReg = /^[\dA-Za-z]{8,20}$/;
  var res = passReg.test(pass.value);
  if (!res) {
    passErr.style.display = "inline";
    passErr.style.color = "red";
    passErr.innerHTML = "密码由8-20位数字或母组成，请重新输入";
    flag.passFlag = false;
    fun();
    return;
  }
  flag.passFlag = true;
  passErr.style.display = "none";
  fun();
};

// 验证码
auth.oninput = function () {
  if (auth.value != n) {
    authErr.style.display = "inline";
    authErr.style.color = "red";
    authErr.innerHTML = "验证码错误";
    flag.authFlag = false;
  } else {
    authErr.style.display = "none";
    flag.authFlag = true;
  }
  fun();
};

// 短信验证码
telauthbtn.onclick = function () {
  if (!flag.telFlag) {
    console.log(1);
    telErr.style.display = "inline";
    telErr.style.color = "red";
    telErr.innerHTML = "请输入手机号";
  } else {
    num = "";
    for (var i = 0; i < 4; i++) {
      num += parseInt(Math.random() * 10);
    }
    alert(num);
  }
  if (!flag.authFlag) {
    authErr.style.display = "inline";
    authErr.style.color = "red";
    authErr.innerHTML = "请填写验证码";
  } else {
    B.style.display = "none";
  }
};
telauth.oninput = function () {
  if (telauth.value != num) {
    telauthErr.style.display = "inline";
    telauthErr.style.color = "red";
    telauth.innerHTML = "验证码输入有误";
    flag.telauthFlag = false;
  } else {
    telauthErr.style.display = "none";
    flag.telauthFlag = true;
  }
  fun();
};

function fun() {
  if (flag.telFlag && flag.passFlag && flag.authFlag && flag.telauthFlag) {
    btn.style.background = "#00c89f";
    btn.removeAttribute("disabled");
    return;
  }
  btn.setAttribute("disabled", "true");
}

// let xhr = new XMLHttpRequest();
// xhr.open("get", "http://localhost:9090/getData");
// xhr.send();
// xhr.onload = function () {
//   let res = JSON.parse(xhr.responseText);
//   console.log(res);
// };
